<template>
  <div class="flex items-center text-[13px]" @click.stop="show = !show">
    <span class="mr-[10px]">{{ gameText }}</span>
  </div>
  <div>
    <van-popup
      round
      v-model:show="show"
      position="bottom"
      :style="{ height: '80%' }"
      :close-on-click-overlay="true"
    >
      <div class="popup-box">
        <ul>
          <li
            class="item"
            v-for="item in gameOptions"
            :key="item.value"
            @click="handleGameSelect(item)"
          >
            {{ item.text }}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";
const show = ref(false)
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);

const gameText = ref('选择游戏')

const gameOptions = computed(() => {
  console.log(gameTotal.value, "gameTotal");
  return [{ text: "全部游戏", value: -1 }].concat(
    gameTotal.value.map(v => {
      return {
        text: v.Name,
        value: v.LotteryId
      };
    })
  );
});

const emit = defineEmits(["update"])
const handleGameSelect = (val)=>{
  console.log(val,'val')
  if(val.value == -1){
    gameText.value = '选择游戏'
  }else{
    gameText.value = val.text
  }
  show.value = false

  emit("update", val)
}



</script>

<style scoped>
.popup-box {
  @apply py-[5px];
}
.popup-box .item {
  @apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];
}
</style>